<template>
  <div class="worktable">
    <div class="mark">
      <h2>欢迎用户：{{ userobj.name }}</h2>
      <p>
        你的权限是：{{
          userobj.role == "visitor" ? "游客" : "哇偶，你居然不是游客"
        }}
      </p>
    </div>
    <div id="home_carvas"></div>
    <div class="worktable_nav">
      <h2>快速导航</h2>
      <div class="nav_items">
        <router-link to="/textall">文章管理</router-link>
        <router-link to="/comment">评论管理</router-link>
        <router-link to="/files">文件管理</router-link>
        <router-link to="/users">用户管理</router-link>
        <router-link to="/visit">访问管理</router-link>
        <router-link to="/edit">系统设置</router-link>
      </div> 
    </div>
    <div class="default_text">
      <div class="text_tit"><span>最新文章</span><router-link to="/textall">所有文章>></router-link></div>
      <div class="imgs_items">
        <div v-for="(item, ind) in imgs" :key="ind"
        @click="()=>toedittext(item.id)"
        >
          <img :src="item.cover" alt="" />
        </div>
      </div>
    </div>
    <div class="default_text">
      <div class="text_tit"><span>最新评论</span> <router-link to="/comment">更多评论>></router-link></div>
      <div class="textlists">
        <div v-for="(item, ind) in textLists" :key="ind">
          <div class="textsa">
            {{ item.name }} 在
            <a-popover placement="right">
              <template #content>
                <!-- {{item}} -->
                <iframe :src="'https://creationapi.shbwyz.com' + item.url"> </iframe>
              </template>
              <template #title>
                <span>预览页面</span>
              </template>
              <a-button class="btns" style="border:none;">文章</a-button>
            </a-popover>

            评论
            <a-popover placement="right">
              <template #content>
                {{ item.content }}
              </template>
              <template #title>
                <span>预览页面</span>
              </template>
              <a-button class="btns" style="border:none;">查看内容</a-button>
            </a-popover>
            <a-badge :status="item.pass ? 'success' : 'warning'" />
            {{ item.pass ? "通过" : "未通过" }}
          </div>
          <div class="edit_box">
            <a-button @click="() => btnpass(item, '1')">通过</a-button>
            <a-button @click="() => btnpass(item, '0')">拒绝</a-button>
            <a-button @click="() => showModal(item)">回复</a-button>
            <a-popconfirm title="你确定要删除它吗" ok-text="是" cancel-text="否" @confirm="() => confirm(item)">
              <a-button>删除</a-button>
            </a-popconfirm>
          </div>
        </div>
      </div>
    </div>
    <a-modal v-model:visible="visible" title="请输入评论内容" @ok="handleOk" okText="确认" cancelText="取消">
      <textarea v-model="valueshf" style="width: 100%;height: 160px;outline: none;"></textarea>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { storeToRefs } from "pinia";
import { useLogin } from "../../store/login";
import { useHome } from "../../store/home";
import { useComment } from "../../store/comment"
//初始化 pinia 
let comments = useComment();
import * as echarts from "echarts";
import { onMounted, ref, reactive } from "vue";
import {useRouter} from "vue-router"
import router from "../../router/route";



//跳转页面
const toedittext = (id:any) =>{
  router.push({
    path:"/artedit/"+id
  })
}
//展示信息
const logins = useLogin();
const homes = useHome();
let { userobj } = storeToRefs(logins);
let { imgs, textLists } = storeToRefs(homes);
homes.getImages(1, 6);
homes.getList(1, 6);
let valueshf = ref("");
const visible = ref<boolean>(false);
let hfobj = reactive({});
const showModal = (val: any) => {
  // console.log(val,"val")
  hfobj = {}
  hfobj = {
    email: val.email,
    hostId: val.hostId,
    name: JSON.parse(localStorage.getItem("users") || '{}').name,
    parentCommentId: val.id,
    replyUserEmail: val.email,
    replyUserName: val.name,
    url: val.url
  }
  visible.value = true;
};

const handleOk = (e: MouseEvent) => {
  let obj = {};
  obj = {
    ...hfobj,
    content: valueshf.value,
    createByAdmin: true,
  }
  comments.addplList(obj)
  if (valueshf.value.length > 0) {
    visible.value = false;
    setTimeout(()=>{
      homes.getList(1, 6);
    },2000)
  }

};
const btnpass = (val: any, v: string) => {
  val.pass = v
  comments.editcomment(val,true)
}
//点击删除单个
const confirm = (val: any) => {
  comments.removecomment(val.id)
  homes.getList(1, 6);
};
onMounted(() => {
  var app = {};

  var chartDom = document.getElementById("home_carvas");
  var myChart = echarts.init(chartDom);
  var option;

  const categories = (function () {
    let now = new Date();
    let res = [];
    let len = 10;
    while (len--) {
      res.unshift(now.toLocaleTimeString().replace(/^\D*/, ""));
      now = new Date(+now - 2000);
    }
    return res;
  })();
  const categories2 = (function () {
    let res = [];
    let len = 10;
    while (len--) {
      res.push(10 - len - 1);
    }
    return res;
  })();
  const data = (function () {
    let res = [];
    let len = 10;
    while (len--) {
      res.push(Math.round(Math.random() * 1000));
    }
    return res;
  })();
  const data2 = (function () {
    let res = [];
    let len = 0;
    while (len < 10) {
      res.push(+(Math.random() * 10 + 5).toFixed(1));
      len++;
    }
    return res;
  })();
  option = {
    title: {
      text: "Dynamic Data",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#283b56",
        },
      },
    },
    legend: {},
    toolbox: {
      show: true,
      feature: {
        dataView: { readOnly: false },
        restore: {},
        saveAsImage: {},
      },
    },
    dataZoom: {
      show: false,
      start: 0,
      end: 100,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: true,
        data: categories,
      },
      {
        type: "category",
        boundaryGap: true,
        data: categories2,
      },
    ],
    yAxis: [
      {
        type: "value",
        scale: true,
        name: "Price",
        max: 30,
        min: 0,
        boundaryGap: [0.2, 0.2],
      },
      {
        type: "value",
        scale: true,
        name: "Order",
        max: 1200,
        min: 0,
        boundaryGap: [0.2, 0.2],
      },
    ],
    series: [
      {
        name: "Dynamic Bar",
        type: "bar",
        xAxisIndex: 1,
        yAxisIndex: 1,
        data: data,
      },
      {
        name: "Dynamic Line",
        type: "line",
        data: data2,
      },
    ],
  };
  app.count = 11;
  setInterval(function () {
    let axisData = new Date().toLocaleTimeString().replace(/^\D*/, "");
    data.shift();
    data.push(Math.round(Math.random() * 1000));
    data2.shift();
    data2.push(+(Math.random() * 10 + 5).toFixed(1));
    categories.shift();
    categories.push(axisData);
    categories2.shift();
    categories2.push(app.count++);
    myChart.setOption({
      xAxis: [
        {
          data: categories,
        },
        {
          data: categories2,
        },
      ],
      series: [
        {
          data: data,
        },
        {
          data: data2,
        },
      ],
    });
  }, 2100);

  option && myChart.setOption(option);
});
</script>

<style lang="scss">
.worktable {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: auto;
  background: #ccc;

  .mark {
    width: 100%;
    height: 100px;
    background: #fff;
    position: sticky;
    z-index: 1;
    left: 0;
    top: 0;
    // border: 1px solid #000;
  }

  #home_carvas {
    width: 100%;
    height: 400px;
    background: #fff;
  }
}

.worktable_nav {
  width: 100%;
  height: 100px;
  margin: 20px 0;
  background: #fff;
  // border-bottom: 1px solid #000;
  padding: 5px;

  h2 {
    border-bottom: 1px solid #ccc;
    height: 30px;
    text-align: left;
    padding: 0;
    margin: 0;
  }

  .nav_items {
    width: 100%;
    height: 50px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;

    >a {
      flex: 1;
      height: 100%;
      display: flex;
      color: #000;
      justify-content: center;
      align-items: center;
    }
  }
}

.default_text {
  width: 100%;
  height: auto;
  background: #fff;
  margin: 30px 0;

  .text_tit {
    width: 100%;
    padding: 5px 0;
    display: flex;
    justify-content: space-between;

    >span {
      width: 120px;
    }
  }
}

.imgs_items {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
 
  >div {
    width: 30%;
    height: 120px;
    margin: 1%;
    &:hover{
    transform: scale(1.1,1.1);
    box-shadow: 0 0 3px 3px #ccc;
  }
    img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
}


.textlists {
  width: 100%;

  >div {
    display: flex;
    justify-content: space-between;

    >div {
      width: 40%;
      // border: 1px solid #000;
    }
  }
}

.edit_box {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.textsa {
  display: flex;
  height: 22px;
  justify-content: start;
}

.btns {
  border: none;
  background: none;
  outline: none;

  span {
    color: blue;
  }
}</style>